<template>
<div id="home">
    <Layout>
        <Header>
            <Menu mode="horizontal" theme="dark" active-name="1">
                <div class="layout-logo">站控层管理监视系统</div>
                <div class="layout-nav" style="text-align: right;">
                    <Dropdown>
                        <Button type="primary">
                            <Icon type="person"></Icon>
                            {{ user }}
                            <Icon type="arrow-down-b"></Icon>
                        </Button>
                        <DropdownMenu slot="list" style="text-align: center;">
                            <DropdownItem>用户信息</DropdownItem>
                            <DropdownItem @click.native="logout()">退出</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
            </Menu>
        </Header>
        <Layout v-bind:style="{height:homeBodyHeight+'px'}">

            <!-- 左侧导航 -->
            <Sider hide-trigger>
                <LeftMenu></LeftMenu>
            </Sider>

            <!-- 子界面 -->
            <Layout style="padding:15px">
                <Content>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </Content>
            </Layout>

        </Layout>
    </Layout>
</div>
</template>
<script>
//导入UI
import Vue from 'vue'
import {
    Layout,
    Header,
    Sider,
    Menu,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Button,
    Icon,
    Content,
    Modal,
    Message
} from 'iview';
Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
import {
    mapState
} from 'vuex';
//导入菜单组件
import LeftMenu from '../components/LeftMenu';
export default {
    name: 'home',
    data() {
        return {
            homeBodyHeight: 840, //主界面高度
            user: '' //用户名
        };
    },
    created() {
        let userStr = sessionStorage.getItem("user");
        this.user = userStr;
    },
    computed: {
        // ...mapState({
        //     user: state => state.user
        // })
    },
    mounted() {
        //界面高度设置
        this.homeBodyHeight = document.documentElement.clientHeight - 64;
        window.addEventListener('resize', () => {
            let bodyHeight = document.documentElement.clientHeight - 64;
            if (bodyHeight > 836) {
                this.homeBodyHeight = document.documentElement.clientHeight - 64;
            } else {
                this.homeBodyHeight = 836;
            }
        });
    },
    methods: {
        logout() {
            sessionStorage.removeItem('token'); //清除token信息
            sessionStorage.removeItem('user'); //清除user信息
            this.$router.push({
                path: '/'
            }); //跳转登录界面
        }
    },
    components: {
        Layout,
        Header,
        Sider,
        Menu,
        Dropdown,
        DropdownMenu,
        DropdownItem,
        Button,
        Icon,
        Content,
        Modal,
        Message,
        LeftMenu
    }
}
</script>
<style scoped="scoped">
.layout-logo {
    width: 170px;
    height: 40px;
    line-height: 40px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    color: #f5f7f9;
    font-size: 16px;
    text-align: center;
    position: relative;
    top: 12px;
    left: 0;
}
</style>
